<template>
  <div style="padding: 30px">
    <div class="flex_between">
      <div>
        <n-input-group style="width: 345px;">
          <n-select
              v-model:value="selectValue"
              filterable
              :placeholder="t('message.changeQueue')"
              :options="options"
              @update:value="handleUpdateValue"
          />
        </n-input-group>
        <n-button type='info' style="margin-left: 10px" @click="handleUpdateValue(selectValue)">
          <template #icon>
            <n-icon style="vertical-align: bottom">
              <md-refresh/>
            </n-icon>
          </template>
          {{ $t("common.refresh") }}
        </n-button>
      </div>
    </div>
    <div style="margin-top: 30px">
      <el-table height="calc(100vh - 290px)" :data="data" border cell-style="text-align:center"
                header-cell-style="text-align:center">
        <el-table-column align="center" prop="id" label="Id" width="200"></el-table-column>
        <el-table-column align="center" prop="queueName" :label="t('queue.name')" width="380"></el-table-column>
        <el-table-column align="center" prop="message" :label="t('message.name')"></el-table-column>
        <el-table-column :label="t('common.createTime')" width="220">
          <template #default="scope">
            <n-time :time="parseInt(scope.row.createTime)" style="margin-right: 10px"/>
          </template>
        </el-table-column>

        <el-table-column :label="t('delay.delayTime')" width="280">
          <template #default="scope">
            <n-time :time="parseInt(scope.row.delayTime)" style="margin-right: 10px"/>

            <n-tag type="info">
              <n-time :to="new Date()" :time="parseInt(scope.row.delayTime)" type="redirect"/>
            </n-tag>
          </template>
        </el-table-column>
      </el-table>
      <div style="display: flex;justify-content: space-between;margin-top: 20px">
        <div></div>
        <n-pagination
            v-model:page="pageQuery.page"
            v-model:page-size="pageQuery.size"
            :page-count="pageCount"
            show-size-picker
            :page-sizes="[10, 20, 50]"
            :on-update:page-size="updatePageSize"
            :on-update:page="updatePage"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {defineComponent, ref, h} from 'vue'
import {NButton, NTime, useDialog} from "naive-ui"
import {useI18n} from "vue-i18n"
import {IosSearch, MdRefresh} from '@vicons/ionicons4'
import {findAllQueueRequest, findQueueDelayByNameRequest} from "../../../service/devil/devil"
import {DelayQueuePage, PageDelayData, PageDelayDataQueue} from "../../../service/devil/type"

export interface optionsInterface {
  label: string
  value: string
}

interface dataInterface {
  id: string
  queueName: string
  key: number
  message: string
  createTime: number
  delayTime: number
}

interface forEachData {
  id: string
  queueName: string
  message: string
  createTime: number
  delayTime: number
}

export default {
  name: "Message",
  components: {
    IosSearch,
    MdRefresh
  },
  setup: function () {
    const dialog = useDialog()
    const {t} = useI18n()

    // 队列列表
    let queueList = ref<string[]>()
    // 选项内容
    let selectValue = ref<string>();
    // 选项参数
    let options = ref<optionsInterface[]>([])
    // 请求参数
    let pageQuery = ref<DelayQueuePage>({
      page: 1,
      size: 20,
      name: ''
    })
    // 表格数据
    let data = ref<dataInterface[]>([])
    let pageCount = ref<number>(1)

    // 请求数据
    async function getQueueNameList() {
      queueList.value = await findAllQueueRequest('');
      options.value = []
      let sum: number = 0;
      queueList.value?.forEach((value) => {
        options.value.push({
          label: value,
          value: value
        })
        sum++
      })
    }

    getQueueNameList()

    // 选项改变时
    async function handleUpdateValue(value: string) {
      pageQuery.value.name = value
      const pageList = await findQueueDelayByNameRequest(pageQuery.value)
      let sum: number = 0;
      data.value = []
      pageList.data?.forEach((value: PageDelayData) => {
        data.value.push({
          id: value.id,
          key: sum,
          message: value.message,
          createTime: value.createTime,
          queueName: value.queueName,
          delayTime: value.delayTime
        })
        sum++
      })
      pageQuery.value.page = pageList.page
      pageQuery.value.size = pageList.size
      pageCount.value = pageList.pageCount
    }

    handleUpdateValue('')

    // 消费消息
    async function customer(raw: dataInterface) {

    }

    // 刷新
    async function refresh() {
      pageQuery.value.page = 1
      await handleUpdateValue(selectValue.value as string)
    }

    async function updatePageSize(num: number) {
      pageQuery.value.size = num
      pageQuery.value.page = 1
      await handleUpdateValue(selectValue.value as string)
    }

    async function updatePage(num: number) {
      pageQuery.value.page = num
      await handleUpdateValue(selectValue.value as string)
    }

    function dataMinute(num: number): string {
      if (num < 60000) {
        return num + "ms";
      } else {
        return parseInt(num / 60000 + "") + t("common.minute")
      }
    }

    return {
      queueList,
      options,
      selectValue,
      t,
      handleUpdateValue,
      data,
      pageCount,
      pageQuery,
      updatePageSize,
      updatePage,
      refresh,
      dataMinute
    }
  }
}
</script>

<style scoped>

</style>
